import 'katex/dist/katex.min.css';
import Latex from 'react-latex-next';
import { getLabel } from './utils';

export default function FormField({ label, children }) {
  let nLabel = label;
  if (
    label.length >= 2 &&
    label[0] === '$' &&
    label[label.length - 1] === '$'
  ) {
    nLabel = <Latex>{label}</Latex>;
  } else {
    nLabel = getLabel(label);
  }
  return (
    <div className='nm-form__field'>
      <label className='nm-form__label'>{nLabel}</label>
      <div className='nm-form__input'>{children}</div>
    </div>
  );
}
